<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/css/addBook.css}">
  <link rel="stylesheet" th:href="@{/css/updateold.css}">
</head>
<body>
<div class="container_l">
  <h1>旧书</h1>
  <table th:object="${books}">
    <tr>
      <td th:text="${books.book_name}"></td>
    </tr>

    <tr>
      <td th:text="${books.author}"></td>
    </tr>

    <tr>
      <td><span th:if="${books.book_cover}">
          <img th:src="${books.bookCoverJpg}"
               alt="Book Cover" width="100" height="150" /></span></td>
    </tr>

    <tr>
      <td th:text="${books.book_detail}"></td>
    </tr>

    <tr>
      <td th:text="${books.book_price}"></td>
    </tr>

    <tr>
      <td th:text="${books.book_text}"></td>
      <!-- 将对象的其他属性列在后面 -->
    </tr>
  </table>
</div>
<div class="container">
  <h1 class="title">新的信息</h1>
  <form action="/updateBook" method="post" th:object="${books}" enctype="multipart/form-data">
    <label for="book_name">BookName:</label>
    <input type="text" id="book_name" name="book_name" required />

    <input type="hidden" name="book_id" th:value="${books.book_id}" />

    <label for="author">Author:</label>
    <input type="text" id="author" name="author" required />

    <label for="book_cover_input">BookCover:</label>
    <input
            type="file"
            name="book_cover_input"
            id="book_cover_input"
            accept="image/*"
            onchange="loadImage(event)"
            required
    />
    <img id="book_cover_preview" class="book-cover-preview" />
    <label for="book_detail">BookDetail:</label>
    <input type="text" id="book_detail" name="book_detail" required />

    <label for="book_price">BookPrice:</label>
    <input type="text" id="book_price" name="book_price" required />

    <label for="book_text">BookText:</label>
    <input type="text" id="book_text" name="book_text" required />

    <input type="submit" value="更新" />
  </form>
  <a href="/findAllBooks">回去看看</a>
</div>

<script>
  // 加载图像文件并预览它
  function loadImage(event) {
    var input = event.target;
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        var preview = document.getElementById("book_cover_preview");
        preview.src = e.target.result;

        var base64str = e.target.result.split(",")[1];
        var bookCoverInput = document.getElementById("book_cover");
        bookCoverInput.value = base64str;
      };
      reader.readAsDataURL(input.files[0]);
    }
  }
</script>
</body>
</html>